import { createElement, useEffect, useState } from 'rax';
import View from 'rax-view';
import Image from 'rax-image';
import TextInput from "rax-textinput";
import './index.css';

const PhoneLogin = (props) => {
  let {
    phone,
    code
  } = props;

  const onInput = (type, e) => {
    let value = e.target.value;
    props.onInput && props.onInput({type: type, value: value});
  }

  return (
    <View
      className='maskView'
      onClick={()=>{props.onClose && props.onClose()}}
    >
      <View className='modal_login'>
        <View className='modal_login_header'>
          <View className='modal_login_header_logo'>
            <Image
              source={{uri: ''}}
              className='modal_login_header_logo_img'
            />
          </View>
          <View className='modal_login_header_info'>描述好玩和送会员权益词</View>
        </View>
        <View className='modal_login_form'>
          <View className='modal_login_form_item'>
            <View className='modal_login_form_item_title'></View>
            <View className='modal_login_form_item_control'>
              <TextInput
                value={phone}
                onInput={(e)=>{onInput('phone', e)}}
                className='modal_login_form_item_control_value'
              />
            </View>
          </View>
          <View className='modal_login_form_item'>
            <View className='modal_login_form_item_title'></View>
            <View className='modal_login_form_item_control'>
              <TextInput
                value={code}
                onInput={(e)=>{onInput('code', e)}}
                className='modal_login_form_item_control_value'
              />
              <View className='modal_login_form_item_control_action'></View>
            </View>
          </View>
        </View>
        <View className='modal_login_action'>登录</View>
        <View className='modal_login_tip'>
          登录代表您已仔细阅读
          <Text className='modal_login_tip_desc'>《用户服务协议》</Text>
          和
          <Text className='modal_login_tip_desc'>《隐私政策》</Text>
        </View>
      </View>
    </View>
  )
}
export default PhoneLogin;
